
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			
			#show {
				width: 500px;
				height: 200px;
				position: absolute;
				top: 150px;
				border: 1px solid;
				text-align: center;
				background-color: white;
				opacity: 0.8;
				display: none;
			}
			
			#show>input {
				width: 100px;
				height: 30px;
				position: absolute;
				top: 60%;
				left: 40%;
				background-color: white;
				border: 0px;
				background-color: #D2691E;
				border-radius: 5px;
			}
			#show>input:hover{
				background-color: red;
			}
			#show>p {
				position: relative;
				top: 50px;
				font-size: 16px;
			}
		</style>
	</head>

	<body>
		<canvas id="cancas" width="" height=""></canvas>
		<div id="show">
			<p id="sl">11</p>
			<input type="button" name="" id="" value="再来一次" />
		</div>
		<script type="text/javascript">
			var canvas = document.getElementById("cancas");
			canvas.height = 500;
			canvas.width = 500;
			var ctx = canvas.getContext("2d");
			var qizi = [];
			var isbai = true;
			drawQipan();
			var show = document.getElementById("show");
			show.children[1].onclick = function() {
				drawQipan();
				show.style.display = "none";
			}
			canvas.onclick = function(e) {
				e = e ? e : window.event;
				var x = e.offsetX - 25;
				var y = e.offsetY - 25;
				//console.log(x+","+y)
				//画一个棋子
				for(var i = 0; i < 15; i++) {
					for(j = 0; j < 15; j++) {
						var t = Math.pow((i * 32 - x), 2) + Math.pow((j * 32 - y), 2);
						if(t < Math.pow(15, 2)) {
							if(qizi[j][i] == 0) {
								drawQizi(i, j);
								if(yanzheng(i, j)) {			console.log(isbai ? "hei" : "bai");
									show.style.display = "block";
									show.children[0].innerHTML = isbai ? "黑方胜利" : "白方胜利"
								};
								break;
							}
						}
					}
				}
			};

			function yanzheng(x, y) {
				//横向
				var bainum = 0;
				var heinum = 0;
				for(var i = 0; i < 15; i++) {
					bainum = 0;
					heinum = 0;
					for(var j = 0; j < 15; j++) {
						if(qizi[i][j] == 1) {
							bainum++;
							heinum = 0;
							if(bainum >= 5) {
								return true;
							}
						} else if(qizi[i][j] == 2) {
							bainum = 0;
							heinum++;
							if(heinum >= 5) {
								return true;
							}
						} else if(qizi[i][j] == 0) {
							bainum = 0;
							heinum = 0;
						}
					}
				}
				//纵向
				for(var i = 0; i < 15; i++) {
					bainum = 0;
					heinum = 0;
					for(var j = 0; j < 15; j++) {
						if(qizi[j][i] == 1) {
							bainum++;
							heinum = 0;
							if(bainum >= 5) {
								return true;
							}
						} else if(qizi[j][i] == 2) {
							bainum = 0;
							heinum++;
							if(heinum >= 5) {
								return true;
							}
						} else if(qizi[j][i] == 0) {
							bainum = 0;
							heinum = 0;
						}
					}
				}
				//斜上
				var vy = x + y > 14 ? 14 : x + y;
				var vx = (x + y) - vy;
				bainum = 0;
				heinum = 0;
				for(; vy > 0 && vx < 15; vy--, vx++) {
					if(qizi[vy][vx] == 1) {
						bainum++;
						heinum = 0;
						if(bainum >= 5) {
							return true;
						}
					} else if(qizi[vy][vx] == 2) {
						bainum = 0;
						heinum++;
						if(heinum >= 5) {
							return true;
						}
					} else if(qizi[vy][vx] == 0) {
						bainum = 0;
						heinum = 0;
					}
				}
				//斜下
				var vy = y - x < 0 ? 0 : y - x;
				var vx = x - y < 0 ? 0 : x - y;
				bainum = 0;
				heinum = 0;
				for(; vy < 15 && vx < 15; vy++, vx++) {
					if(qizi[vy][vx] == 1) {
						bainum++;
						heinum = 0;
						if(bainum >= 5) {
							return true;
						}
					} else if(qizi[vy][vx] == 2) {
						bainum = 0;
						heinum++;
						if(heinum >= 5) {
							return true;
						}
					} else if(qizi[vy][vx] == 0) {
						bainum = 0;
						heinum = 0;
					}
				}
				return false;
			}

			function drawQizi(arrx, arry) {
				ctx.beginPath();
				if(isbai) {
					ctx.fillStyle = "#FFFFFF";
					qizi[arry][arrx] = 1;
				} else {
					ctx.fillStyle = "#000000";
					qizi[arry][arrx] = 2;
				}
				ctx.arc(arrx * 32 + 25, arry * 32 + 25, 15, 0, 2 * Math.PI);
				ctx.fill();
				isbai = !isbai;
			}

			function drawQipan() {
				isbai = true;
				ctx.clearRect(0, 0, 500, 500);
				ctx.fillStyle = "darkorange";
				ctx.beginPath();
				ctx.fillRect(0, 0, 500, 500);
				ctx.rect(8, 8, 484, 484);
				ctx.lineWidth = "2";
				ctx.strokeStyle = "#000000";
				ctx.stroke();
				ctx.lineWidth = "1";
				for(var i = 0; i < 15; i++) {
					ctx.beginPath();
					ctx.moveTo(25 + i * 32, 25);
					ctx.lineTo(25 + i * 32, 474);
					ctx.stroke();
					ctx.beginPath();
					ctx.moveTo(25, 25 + i * 32);
					ctx.lineTo(474, 25 + i * 32);
					ctx.stroke();
				}
				init();
			}

			function init() {
				qizi=[];
				for(var i = 0; i < 15; i++) {
					var hang = [];
					for(var j = 0; j < 15; j++) {
						hang.push(0);
					}
					qizi.push(hang);
				}
			}
		</script>
	</body>

</html>